<template>
	<div ref='nodePanel' class="property-panel">
		<div v-if="nodeName"  class="node-name">{{nodeName}}</div>
		<component
		  :is="getComponent"
		  v-if="element"
		  :element="element"
		  :bpmnModel="bpmnModel"
		/>
	</div>
</template>

<script>
	import taskPanel from './task.vue'
	import processPanel from './process.vue'
	import {NodeName} from '../translate/lang/zh.js'
	import startEndPanel from './startEndPanel.vue'
	import sequenceFlowPanel from './sequenceFlowPanel.vue'
	import gatewayPanel from './gatewayPanel.vue'
	import subProcessPanel from './subProcessPanel.vue'
	export default {
		name: 'NodePanel',
		components: {
			taskPanel,
			processPanel,
			startEndPanel,
			sequenceFlowPanel,
			gatewayPanel,
			subProcessPanel
		},
		props: {
			bpmnModel: {
				type: Object,
				required: true
			},
		},
		data() {
			return {
				element: null,
				component:"processPanel"
			}
		},
		computed: {
			getComponent(){
				const type = this.element?.type;
				//事件
				if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
				  return 'startEndPanel'
				}
				//活动
				if ([
				  'bpmn:UserTask',
				  'bpmn:Task',
				  'bpmn:SendTask',
				  'bpmn:ReceiveTask',
				  'bpmn:ManualTask',
				  'bpmn:BusinessRuleTask',
				  'bpmn:ServiceTask',
				  'bpmn:ScriptTask'
				  // 'bpmn:CallActivity',
				  // 'bpmn:SubProcess'
				].includes(type)) {
				  return 'taskPanel'
				}
				//路由线
				if (type === 'bpmn:SequenceFlow') {
				  return 'sequenceFlowPanel'
				}
				//网关
				if ([
				  'bpmn:InclusiveGateway',
				  'bpmn:ExclusiveGateway',
				  'bpmn:ParallelGateway',
				  'bpmn:EventBasedGateway'
				].includes(type)) {
				  return 'gatewayPanel'
				}
				//主流程
				if (type === 'bpmn:Process') {
				  return 'processPanel'
				}
				//子流程
				if(type==='bpmn:SubProcess'){
					return 'subProcessPanel'
				}
				return null
			},
			nodeName() {
				if(this.element){
					const bizObj = this.element.businessObject
					const type = bizObj?.eventDefinitions
					  ? bizObj.eventDefinitions[0].$type
					  : bizObj.$type
					return NodeName[type] || type
				}
				return null;
			}
		},
		mounted() {
			this.handleModeler()
		},
		methods: {
			handleModeler() {
				this.bpmnModel.on('root.added', e => {
					if (e.element.type === 'bpmn:Process') {
						this.element = null
						this.$nextTick().then(() => {
							this.element = e.element
						})
					}
				})
				this.bpmnModel.on('element.click', e => {
					const {
						element
					} = e
					console.log(element)
					if (element.type === 'bpmn:Process') {
						this.element = element
					}
				})
				this.bpmnModel.on('selection.changed', e => {
					// hack 同类型面板不刷新
					this.element = null
					const element = e.newSelection[0]
					if (element) {
						this.$nextTick().then(() => {
							this.element = element
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.property-panel {
	  // padding: 20px 20px;
	  // reset element css
	  .el-form--label-top .el-form-item__label {
	    padding: 0;
	  }
	  .el-form-item {
	    margin-bottom: 6px;
	  }
	  .tab-table .el-form-item {
	    margin-bottom: 16px;
	  }
	  .node-name{
	    border-bottom: 1px solid #ccc;
	    padding: 0 0 10px 20px;
	    margin-bottom: 10px;
	    font-size: 16px;
	    font-weight: bold;
	    color: #444;
	  }
	}
</style>
